<template>
  <view class="thesis-help-publish-page">
    <view class="form-container">
      <!-- 论文标题 -->
      <view class="form-section">
        <view class="form-item">
          <view class="form-label">论文标题</view>
          <view class="form-input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入论文标题" 
              v-model="formData.thesisTitle"
              maxlength="80"
            />
          </view>
        </view>
      </view>

      <!-- 研究领域 -->
      <view class="form-section">
        <view class="form-item">
          <view class="form-label">研究领域</view>
          <view class="form-input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="例如：计算机科学/教育学" 
              v-model="formData.researchField"
              maxlength="60"
            />
          </view>
        </view>
      </view>

      <!-- 论文类型 -->
      <view class="form-section">
        <view class="form-item clickable" @click="openThesisTypePicker">
          <view class="form-label">论文类型</view>
          <view class="form-value-wrapper">
            <text class="form-value">{{ thesisTypeLabel }}</text>
            <text class="iconfont icon-ic_rightarrow arrow-icon"></text>
          </view>
        </view>
      </view>

      <!-- 紧急程度 -->
      <view class="form-section">
        <view class="form-item clickable" @click="openUrgencyPicker">
          <view class="form-label">紧急程度</view>
          <view class="form-value-wrapper">
            <text class="form-value">{{ urgencyLabel }}</text>
            <text class="iconfont icon-ic_rightarrow arrow-icon"></text>
          </view>
        </view>
      </view>

      <!-- 预算与完成天数 -->
      <view class="form-section inline-section">
        <view class="form-item">
          <view class="form-label">预算(元)</view>
          <view class="form-input-wrapper">
            <input 
              class="form-input" 
              type="digit" 
              placeholder="请输入预算金额" 
              v-model="formData.budget"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="form-label">完成天数</view>
          <view class="form-input-wrapper">
            <input 
              class="form-input" 
              type="number" 
              placeholder="预计完成天数" 
              v-model="formData.completionDays"
            />
          </view>
        </view>
      </view>

      <!-- 研究背景 -->
      <view class="form-section">
        <view class="form-item description-item">
          <view class="form-label">研究背景</view>
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              placeholder="请描述研究背景及当前进展情况"
              v-model="formData.researchBackground"
              maxlength="2000"
            />
          </view>
        </view>
      </view>

      <!-- 研究目标 -->
      <view class="form-section">
        <view class="form-item description-item">
          <view class="form-label">研究目标</view>
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              placeholder="需要达成的核心目标"
              v-model="formData.researchObjectives"
              maxlength="2000"
            />
          </view>
        </view>
      </view>

      <!-- 研究内容 -->
      <view class="form-section">
        <view class="form-item description-item">
          <view class="form-label">研究内容</view>
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              placeholder="请说明研究内容与工作范围"
              v-model="formData.researchContent"
              maxlength="2000"
            />
          </view>
        </view>
      </view>

      <!-- 研究方法 -->
      <view class="form-section">
        <view class="form-item description-item">
          <view class="form-label">研究方法</view>
          <view class="textarea-wrapper">
            <textarea 
              class="form-textarea" 
              placeholder="例如：问卷调研、实验设计、数据建模等"
              v-model="formData.methodology"
              maxlength="2000"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="bottom-action-bar">
      <button class="publish-btn" @click="publishThesisHelp">确认发布</button>
    </view>

    <!-- 选择器 -->
    <u-picker 
      :show="showThesisTypePicker" 
      :columns="thesisTypeColumns" 
      keyName="label"
      @confirm="confirmThesisType"
      @cancel="showThesisTypePicker = false"
    ></u-picker>

    <u-picker 
      :show="showUrgencyPicker" 
      :columns="urgencyColumns" 
      keyName="label"
      @confirm="confirmUrgency"
      @cancel="showUrgencyPicker = false"
    ></u-picker>
  </view>
</template>

<script>
import { saveThesisRequirement } from '@/api/thesis.js';

export default {
  data() {
    return {
      formData: {
        thesisTitle: '',
        researchField: '',
        researchBackground: '',
        researchObjectives: '',
        researchContent: '',
        methodology: '',
        completionDays: '',
        budget: '',
        thesisType: null,
        urgencyLevel: null
      },
      showThesisTypePicker: false,
      showUrgencyPicker: false,
      thesisTypeOptions: [
        { label: '本科论文', value: 1 },
        { label: '硕士论文', value: 2 },
        { label: '博士论文', value: 3 },
        { label: '期刊论文', value: 4 },
        { label: '会议论文', value: 5 },
        { label: '研究报告', value: 6 }
      ],
      urgencyOptions: [
        { label: '非常紧急', value: 1 },
        { label: '紧急', value: 2 },
        { label: '一般', value: 3 }
      ]
    }
  },
  computed: {
    thesisTypeColumns() {
      return [this.thesisTypeOptions];
    },
    urgencyColumns() {
      return [this.urgencyOptions];
    },
    thesisTypeLabel() {
      const option = this.thesisTypeOptions.find(item => item.value === this.formData.thesisType);
      return option ? option.label : '请选择';
    },
    urgencyLabel() {
      const option = this.urgencyOptions.find(item => item.value === this.formData.urgencyLevel);
      return option ? option.label : '请选择';
    }
  },
  methods: {
    openThesisTypePicker() {
      this.showThesisTypePicker = true;
    },
    confirmThesisType(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const option = this.thesisTypeOptions[idx];
      if (option) {
        this.formData.thesisType = option.value;
      }
      this.showThesisTypePicker = false;
    },
    openUrgencyPicker() {
      this.showUrgencyPicker = true;
    },
    confirmUrgency(e) {
      const idx = (e.indexs && e.indexs[0]) || 0;
      const option = this.urgencyOptions[idx];
      if (option) {
        this.formData.urgencyLevel = option.value;
      }
      this.showUrgencyPicker = false;
    },
    validateForm() {
      const rules = [
        { value: this.formData.thesisTitle, message: '请输入论文标题' },
        { value: this.formData.researchField, message: '请输入研究领域' },
        { value: this.formData.researchBackground, message: '请输入研究背景' },
        { value: this.formData.researchObjectives, message: '请输入研究目标' },
        { value: this.formData.researchContent, message: '请输入研究内容' },
        { value: this.formData.methodology, message: '请输入研究方法' },
        { value: this.formData.budget, message: '请输入预算金额' },
        { value: this.formData.completionDays, message: '请输入完成天数' }
      ];
      for (const rule of rules) {
        if (!String(rule.value || '').trim()) {
          uni.showToast({ title: rule.message, icon: 'none' });
          return false;
        }
      }
      if (!this.formData.thesisType) {
        uni.showToast({ title: '请选择论文类型', icon: 'none' });
        return false;
      }
      if (!this.formData.urgencyLevel) {
        uni.showToast({ title: '请选择紧急程度', icon: 'none' });
        return false;
      }
      if (Number(this.formData.budget) <= 0) {
        uni.showToast({ title: '请输入有效的预算金额', icon: 'none' });
        return false;
      }
      if (Number(this.formData.completionDays) <= 0) {
        uni.showToast({ title: '请输入有效的完成天数', icon: 'none' });
        return false;
      }
      return true;
    },
    buildSubmitPayload() {
      return {
        thesisTitle: this.formData.thesisTitle.trim(),
        researchField: this.formData.researchField.trim(),
        researchBackground: this.formData.researchBackground.trim(),
        researchObjectives: this.formData.researchObjectives.trim(),
        researchContent: this.formData.researchContent.trim(),
        methodology: this.formData.methodology.trim(),
        completionDays: Number(this.formData.completionDays),
        budget: Number(this.formData.budget),
        thesisType: this.formData.thesisType,
        urgencyLevel: this.formData.urgencyLevel
      };
    },
    async publishThesisHelp() {
      if (!this.validateForm()) {
        return;
      }
      const payload = this.buildSubmitPayload();
      uni.showLoading({
        title: '提交中...'
      });
      try {
        await saveThesisRequirement(payload);
        uni.hideLoading();
        uni.showToast({
          title: '发布成功！',
          icon: 'success',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.hideLoading();
        console.error('发布论文求助失败:', error);
        uni.showToast({
          title: (error && error.message) || '发布失败，请重试',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-help-publish-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx;
}

.form-container {
  width: 680rpx;
  padding: 30rpx;
  margin: 20rpx auto;
  border-radius: 20rpx;
  background: #fff;
}

.form-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
  width: fit-content !important;
}

.form-section {
  background: white;
  margin-bottom: 10rpx;
  border-bottom: 1rpx solid #dddddd;
  
  &:last-child {
    border-bottom: none;
  }
  
  .form-item {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    &.clickable {
      cursor: pointer;
    }
    
    &.description-item {
      align-items: flex-start;
      flex-direction: column;
      
      .form-label {
        margin-bottom: 20rpx;
      }
    }
    .form-input-wrapper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
    
    .form-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      padding: 0 24rpx;
      height: 80rpx;
      border: none;
      background: #f8f9fa;
      border-radius: 12rpx;
      text-align: left;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .textarea-wrapper {
      width: 100%;
      margin-top: 20rpx;
    }
    
    .form-textarea {
      width: 100%;
      min-height: 300rpx;
      font-size: 28rpx;
      color: #333;
      padding: 24rpx;
      border: none;
      background: #f8f9fa;
      border-radius: 12rpx;
      text-align: left;
      line-height: 1.6;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .form-value-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      
      .form-value {
        font-size: 28rpx;
        color: #333;
        margin-right: 16rpx;
      }
      
      .arrow-icon {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.inline-section {
  display: flex;
  gap: 20rpx;
  .form-item {
    flex: 1;
    padding: 30rpx 0;
  }
}


// 底部操作栏
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // background: white;
  padding: 30rpx 40rpx;
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  // box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  
  .publish-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}
</style>

